<template>
    <view class="addExpect">
        <view class="content">

            <view class="title">添加求职期望</view>
            <view class="md4Text mgrey info">求职期望的不同，推荐的职位也会不同</view>
            <!-- 选择条件 -->
            <view class="selection">
                <view class="selectHead selectItem">
                    <view class="name smTitle">求职类型</view>

                    <view class="tabBtn md4Text">
                        <view :class="qzlx == '全职' ? 'choosed' : ''" @click="qzlx = '全职';">
                            全职
                        </view>
                        <view :class="qzlx == '兼职' ? 'choosed' : ''" @click="qzlx = '兼职';">
                            兼职
                        </view>
                    </view>
                </view>
                <view class="selectItem" @click="_toView('views/mine/setJob');">
                    <view>
                        <view class="name md4Text mgrey">期望职位

                        </view>
                        <text class="smTitle ">{{position || '请选择期望职位'}}</text>
                    </view>


                    <view class="next">

                        <image src="../../../static/imgs/right.png" mode=""></image>
                    </view>
                </view>

                <!-- <view class="selectItem" @tap="goIndustry">
					<view >
						<view class="name md4Text mgrey">期望行业</view><text class="smTitle mgrey">请选择行业</text>
					</view>
					

					<view class="next">
						
						<image src="../../../static/imgs/right.png" mode=""></image>
					</view>
				</view> -->

                <view class="selectItem" @click="show_salary = true;">
                    <view class="">
                        <view class="name md4Text mgrey">薪资要求</view>
                        <text class="smTitle">{{salary_min ? salary_min+'-'+salary_max+'K' : '请选择期薪资要求'}}</text>
                    </view>


                    <view class="next">

                        <image src="../../../static/imgs/right.png" mode=""></image>
                    </view>
                </view>
                <u-picker :show="show_salary" ref="uPicker" :columns="salaryList" @confirm="setSalary"
                    @change="changeSalary" @cancel="show_salary = false;"></u-picker>
            </view>
        </view>

        <!-- 保存 -->
        <view class="chat">
            <view class="del" @tap="del" v-if="opt_index > -1">删除</view>
            <view class="save" @tap="save">保存</view>
            <!-- <button type="default" class="btn submit" @tap="save"><text>保存</text></button> -->
        </view>

        <!-- <mask-page v-if="isSalary"></mask-page>
		<salary @confirmSalary="confirmSalary"  v-if="isSalary"></salary> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                qzlx: '全职',
                position: '',
                position_id: 0,
                salaryArr: [],
                salaryList: [],
                salary_min: '',
                salary_max: '',
                show_salary: false,

                opt_index: -1
            };
        },
        onLoad(options) {
            this.getSalaryList();
            var row = uni.getStorageSync('edit_resume_position');
            if (row) {
                this.qzlx = row.qzlx;
                this.position = row.position;
                this.position_id = row.position_id;
                this.salary_min = row.salary_min;
                this.salary_max = row.salary_max;
                uni.removeStorageSync('edit_resume_position');
            }
            this.opt_index = isNaN(options.index) ? -1 : options.index;
            console.log(this.opt_index)
        },
        onShow() {
            var position = uni.getStorageSync('select_position');
            if (position) {
                this.position_id = position.id;
                this.position = position.name;
                uni.removeStorageSync('select_position');
            }
        },
        methods: {
            getSalaryList() {
                this._ajax({
                    url: '/api/index/getSalaryList',
                    success: res => {
                        if (res.code == 1) {
                            for (var i in res.data) {
                                res.data[i] = res.data[i] + 'K';
                            }
                            this.salaryArr = res.data;
                            this.salaryList = [this.salaryArr.slice(0, -1), this.salaryArr.slice(1)];
                        }
                    }
                })
            },
            setSalary(e) {
                this.show_salary = false;
                console.log(JSON.stringify(e.value));
                this.salary_min = e.value[0].slice(0, -1);
                this.salary_max = e.value[1].slice(0, -1);
            },
            changeSalary(e) {
                const {
                    columnIndex,
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e;
                console.log(columnIndex, index);
                if (columnIndex === 0) {
                    picker.setColumnValues(1, this.salaryArr.slice(index + 1));
                }
            },
            save() {
                if (!this.position) {
                    return this._toast('请选择期望职位');
                }
                if (!this.salary_min) {
                    return this._toast('请选择期望薪资');
                }
                uni.setStorageSync('select_resume_position', {
                    qzlx: this.qzlx,
                    position: this.position,
                    position_id: this.position_id,
                    salary_min: this.salary_min,
                    salary_max: this.salary_max,
                    index: this.opt_index
                });
                this._toBack();
            },
            del() {
                uni.showModal({
                    title: '温馨提示',
                    content: '删除这条求职期望吗？',
                    showCancel: true,
                    success: (res) => {
                        if(res.confirm) {
                            uni.setStorageSync('delete_resume_position', {
                                index: this.opt_index
                            });
                            this._toBack();
                        }
                    }
                });
            },
            goExpect() {
                uni.navigateTo({
                    url: '/pages/views/home/addExpect'
                })
            },

            confirmSalary() {
                this.isSalary = false;
            },
            fulltime() {
                this.defaultValue = '0';
            },
            parttime() {
                this.defaultValue = '1';
            },

            goIndustry() {
                uni.navigateTo({
                    url: '/pages/views/home/industry'
                })
            }
        }
    };
</script>

<style scoped lang="less">
    .addExpect {
        width: 100%;
        background: #ffffff;

        .content {
            width: 100%;
            padding: 0 52upx;
            position: relative;

            .pageNum {
                position: absolute;
                right: 70upx;
                top: 0;

                text {
                    color: #3465b1;
                }
            }

            .title {
                font-size: 40upx;
                margin: 80upx 0 25upx 20upx;
                font-weight: bold;
                letter-spacing: 5upx;
            }

            .info {
                margin-left: 20upx;
            }

            .selection {
                margin-top: 40upx;

                .selectHead {
                    .tabBtn {
                        width: 160upx;
                        display: flex;

                        view {

                            width: 50%;
                            text-align: center;
                            line-height: 44upx;
                            color: #3465B1;
                            height: 44upx;
                            border: 2upx solid #3465B1;
                        }

                        .choosed {
                            background: #3465B1;
                            color: #fff;
                        }
                    }
                }

                .selectItem {
                    width: 100%;

                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 25upx;
                    padding-top: 50upx;
                    border-bottom: 2upx solid #e5e5e5;
                    display: flex;

                    view {
                        .name {
                            padding-bottom: 22upx;
                        }
                    }

                    .next {
                        image {
                            vertical-align: middle;
                            margin-left: 10upx;
                            width: 48upx;
                            height: 48upx;
                        }
                    }
                }
            }
        }

        .keepAdd {
            display: block;
            width: 612upx;
            height: 112upx;
            margin: 62upx auto;
        }

        .chat {
            width: 100%;
            height: 116upx;
            box-shadow: 0px -10px 80px rgba(167, 167, 167, 0.16);
            position: fixed;
            background-color: #ffffff;
            bottom: 0;
            padding-top: 15upx;
            display: flex;
            align-items: center;
            padding: 0 30rpx;

            .del {
                background-color: #f2f2f2;
                width: 200rpx;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 80rpx;
                margin-right: 30rpx;
            }

            .save {
                background-color: #3f6bb0;
                color: #fff;
                flex: 1;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 80rpx;
            }
        }
    }
</style>
